<template>
  <div>
    <div class="title" v-if="title">
      {{ title }}
    </div>

    <div class="stationList">
      <div class="station" v-for="(item,index) of list" :key="index"
           @tap="gotoDetail(item)">
        <img class="station_picture" :src="item.picture"  mode="aspectFill"/>
        <div class="station_location">{{ item.location }}</div>
        <div class="station_info">{{ item.info }}</div>
        <div class="station_price">{{ item.price }}</div>
        <img class="station_edit" src="../static/img/mine/edit.png" v-if="item.edit" @tap.stop="gotoEdit(item)">
        <img class="station_delete" src="../static/img/mine/delete.png" v-if="item.edit" @tap.stop="gotoDelete(item)">
        <div class="station_status station_status_green" v-if="item.status==='已审核'">已审核</div>
        <div class="station_status station_status_yellow" v-else-if="item.status==='未审核'">未审核</div>
        <div class="station_status station_status_yellow" v-else-if="item.status==='审核中'">审核中</div>
        <div class="station_status station_status_red" v-else-if="item.status==='未通过'">未通过</div>
        <div class="station_status station_status_yellow" v-else-if="item.status==='草稿'">草稿</div>
        <div class="station_info" v-if="item.prodname" >{{ item.prodname }}</div>
        <div class="station_info" v-if="item.cust" >{{ item.cust }}</div>
        <div class="station_info" v-if="item.sub_date" >{{ item.sub_date }}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import wxPromisify from "@/libs/wxPromisify";
  import LoginManager from "@/utils/LoginManager";
  import {delProdDetail} from "@/api";

  export default {
    name: "StationList",
    props: {
      title: '',
      list: {
        type: Array,
        default: [
          // {
          //   picture:require('../../static/img/stationList/expamle.png'),
          //   location:'广东省-广州市',
          //   info:'机组*3    2000KW',
          //   price:'2000万',
          //   status:0,
          //   response:{}
          // },
        ]
      }
    },
    methods: {
      gotoDetail(item) {
        console.log('item:', item);
        // let id = item.response.id;
        wxPromisify.navigateTo({
          url: '/pages/stationDetail/index?id=' + item.id + '&status=' + item.status+ '&source=' + item.source
        })
      },
      gotoEdit(item) {
        console.log('edit',item);
        // wxPromisify.navigateTo({
        //   url: '/pages/release/sell?id=' + item.id + '&status=' + item.status+ '&source=' + item.source
        // })
        wxPromisify.navigateTo({
          url: '/pages/release/editsell?id=' + item.id + '&status=' + item.status+ '&source=' + item.source
        })
      },

      gotoDelete(item){
        console.log('delete',item);
        //delProdDetail
        wx.showModal({
          title: '提示',
          content: '确定删除？',
          showCancel: true,
          success: (res) => {
            if (res.confirm) {
              console.log('用户点击确定')
              //调接口删除电站
              let param = {
                token: LoginManager.getToken(),
                id: item.id,
              }
              this.$Api.delProdDetail(param)//删除电站
                  .then(res => {
                    wx.showToast({
                      title: res,//删除成功，删除失败
                      icon: 'none',
                      duration: 2000
                    })
                    if(res ==='删除成功'){
                      console.log('remove:',item.id);
                      //删除成功将列表中该电站移除
                      let removeIndex;
                      for(let i = 0; i < this.list.length; i++){
                        if(this.list[i].id == item.id){
                          //console.log('suoyin==',i);
                          removeIndex=i;
                        }
                      }
                      this.list.splice(removeIndex, 1);
                    }
                  })
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .title {
    margin-left: 28px;
    margin-top: 48px;
    font-size: 44px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #1F1F1F;
  }

  .stationList {
    margin-top: 20px;
    margin-left: 28px;
    margin-right: 28px;

    .station {
      position: relative;
      display: inline-block;
      box-sizing: border-box;
      width: 336px;
      border-radius: 16px;
      border: 2px solid #EAEAEA;
      padding: 16px 18px;
      margin-top: 20px;

    }

    .station:nth-child(even) {
      margin-left: 24px;
    }

    .station_picture {
      width: 300px;
      height: 320px;
      border-radius: 10px;
    }

    .station_location {
      margin-top: 24px;
      font-size: 32px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    .station_info {
      margin-top: 12px;
      font-size: 24px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
    }

    .station_price {
      margin-top: 16px;
      font-size: 32px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #D9261D;
    }

    .station_edit {
      width: 40px;
      height: 40px;
      position: absolute;
      top: 30px;
      right: 100px;//30px;
    }

    .station_delete {
      width: 40px;
      height: 40px;
      position: absolute;
      top: 30px;
      right: 30px;
    }

    .station_status {
      position: absolute;
      top:458px;
      //bottom: 18px;
      right: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 88px;
      height: 40px;
      background: #FCDAD6;
      border-radius: 8px;
      font-size: 22px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #F04631;
    }

    .station_status_yellow {
      background: #FDF1CC;
      color: #F7B900;
    }

    .station_status_green {
      background: rgb(219, 249, 236);
      color: rgb(64, 217, 144);
    }

    .station_status_red {
      background: #FCDAD6;
      color: #F04631;
    }
  }

</style>